<script setup>
import { Minus } from "@element-plus/icons-vue";
import {
  timeOptions,
  time2Options,
  time4Options,
  time5Options,
  aliDateOptions,
  times,
  days,
  weeks,
  settleDaysOpt,
  expectedArrivalOpt,
  monthOpt,
  prepaymentOpt,
} from "./data";
const props = defineProps({
  modelValue: { type: Object, default: () => ({}) },
  options: { type: Object, default: () => ({}) },
  checked: { type: Array, default: () => [] },
  disabled: Boolean,
  multi: Boolean,
});

const emit = defineEmits(["update:modelValue", "change", "remove"]);

const form = computed({
  get() {
    return props.modelValue;
  },
  set(val) {
    emit("update:modelValue", val);
  },
});
let typeOptions = [
  { label: "预付", value: 1 },
  { label: "出货前付清", value: 5 },
  { label: "货到付款", value: 2 },
  { label: "月结", value: 3 },
  { label: "阿里账期", value: 4 },
  // { label: "诚e赊", value: 6 },
];
const typeChange = ({ value: type }) => {
  form.value.percent = undefined;
  form.value.settle_days_type = null;
  const ways = {
    1: 1,
    5: 2,
    2: 3,
    3: 4,
    4: 5,
  };
  // form.value.time_way = ways[type]
  form.value.config_method = ways[type];
  form.value.settle_days = type === 1 ? 2 : type === 4 ? 10 : null;
  form.value.settle_days_type = (type === 2||type === 3)?1:null
};

if (props.multi) {
  typeOptions = computed(() => {
    const { checked } = props;
    if (checked[0] === 4) {
      return [{ label: "月结", value: 3, disabled: checked.includes(3) }];
    }
    return [
      { label: "预付", value: 1, disabled: checked.includes(1) },
      { label: "出货前付清", value: 5, disabled: checked.includes(5) },
      { label: "货到付款", value: 2, disabled: checked.includes(2) },
      { label: "月结", value: 3, disabled: checked.includes(3) },
    ];
  });
}
const dynamicPlaceholder = computed(() => {
  const selectedOption = settleDaysOpt.find(
    (opt) => opt.value === form.value.settle_days_type
  );
  return selectedOption ? `${selectedOption.label}` : "天数";
});
</script>

<template>
  <div class="flex items-center">
    <v-group class="grid grid-cols-7 items-center w-full">
      <VSelect
        v-model="form.config_way"
        :options="typeOptions"
        class="w-full"
        placeholder="请选择"
        select
        clearable
        @change="typeChange"
      />
      <div class="flex" v-if="multi">
        <el-input-number
          v-model="form.percent"
          controls-position="right"
          :min="0"
          :step="1"
          :precision="0"
          class="w-full"
        />
        <span class="mx-1 mt-1">%</span>
      </div>
      <template v-if="form.config_way === 1">
        <VSelect
          v-model="form.config_method"
          placeholder="请选择"
          select
          :clearable="false"
          :options="prepaymentOpt"
          class="w-full"
          disabled
        />
        <el-input-number
          v-model="form.settle_days"
          controls-position="right"
          :min="0"
          :step="1"
          :precision="0"
          placeholder="固定工作日,默认为2"
          class="w-full"
        />
      </template>
      <template v-if="form.config_way === 5">
        <VSelect
          v-model="form.config_method"
          placeholder="请选择"
          select
          :clearable="false"
          :options="expectedArrivalOpt"
          class="w-full"
          disabled
        />
      </template>
      <template v-if="form.config_way === 3">
        <VSelect
          v-model="form.config_method"
          placeholder="请选择"
          select
          :clearable="false"
          :options="monthOpt"
          class="w-full"
          disabled
        />
        <VSelect
          v-model="form.settle_days_type"
          placeholder="请选择"
          select
          :options="settleDaysOpt"
          class="w-full"
        />
        <VSelect
          v-if="form.settle_days_type == 1"
          v-model="form.settle_days"
          placeholder="结算周期"
          select
          allow-create
          default-first-option
          :options="times"
          class="w-full"
        />
        <VSelect
          v-if="form.settle_days_type == 1"
          v-model="form.settle_date"
          placeholder="结算日期"
          select
          :options="days"
          class="w-full"
        />
        <el-input-number
          v-if="form.settle_days_type != 1"
          v-model="form.settle_days"
          controls-position="right"
          :min="0"
          :step="1"
          :precision="0"
          :placeholder="dynamicPlaceholder"
          class="w-full"
        />
        <VSelect
          v-model="form.settle_week"
          placeholder="请选择"
          select
          :options="weeks"
          class="w-full"
        />
      </template>
      <template v-if="form.config_way === 2">
        <VSelect
          v-model="form.config_method"
          :options="time2Options"
          :clearable="false"
          class="w-full"
          placeholder="请选择"
          select
          disabled
        />
        <VSelect
          v-model="form.settle_days_type"
          :options="settleDaysOpt"
          class="w-full"
          placeholder="请选择"
          select
        />
        <VSelect
          v-if="form.settle_days_type == 1"
          v-model="form.settle_days"
          placeholder="天数"
          select
          allow-create
          default-first-option
          :options="times"
          class="w-full"
        />
        <el-input-number
          v-if="form.settle_days_type != 1"
          v-model="form.settle_days"
          controls-position="right"
          :min="0"
          :step="1"
          :precision="0"
          :placeholder="dynamicPlaceholder"
          class="w-full"
        />
        <VSelect
          v-model="form.settle_week"
          :options="weeks"
          class="w-full"
          placeholder="请选择"
          select
        />
      </template>
      <template v-if="form.config_way === 4">
        <VSelect
          v-model="form.config_method"
          :options="time4Options"
          :clearable="false"
          class="w-full"
          placeholder="请选择"
          select
        />
        <!-- <VSelect v-model="form.config_time" :options="aliDateOptions" class="w-full"
          placeholder="请选择" select /> -->
        <el-input-number
          v-model="form.settle_days"
          controls-position="right"
          :min="0"
          :step="1"
          :precision="0"
          placeholder="天数默认为10"
          class="w-full"
        />
        <VSelect
          v-if="form.config_method != 5"
          v-model="form.settle_date"
          placeholder="请选择"
          select
          :options="days"
          filterable
          clearable
          class="w-full"
        />
      </template>
      <template v-if="form.config_way === 6">
        <VSelect
          v-model="form.config_method"
          :options="time5Options"
          :clearable="false"
          class="w-full"
          placeholder="请选择"
          select
        />
        <!-- <VSelect v-model="form.config_time" :options="aliDateOptions" class="w-full"
          placeholder="请选择" select /> -->
        <el-input-number
          v-model="form.settle_days"
          controls-position="right"
          :min="0"
          :step="1"
          :precision="0"
          placeholder="天数默认为10"
          class="w-full"
        />
      </template>
    </v-group>
    <el-button
      v-if="multi"
      size="small"
      class="ml-2"
      @click="emit('remove')"
      circle
      ><i class="dk-iconfont icon-Minus"
    /></el-button>
  </div>
</template>
